<script lang="ts" setup name="GoodsRecordEdit">
import { CirclePlus, Delete } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { addGoodsAPI, editGoodsAPI, getBranchAPI, getGoodsDetailAPI, getSupplierAPI, getWaresCategoryListAPI } from '~/src/api/goods'
import { Inventory } from '~/src/api/interface/goods'
import { manageModeList, pointTypeLsit, saleDeductList, saleTypeList, stockDetailList } from '~/src/list/goods'
import { initData } from './initData'
const activeName = ref('first')
const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance>()

const formData = ref<Inventory.GoodsDetail>(cloneDeep(initData))

const optionsCategory = ref<Array<Inventory.CategoryList>>([])
const getGoodsCategory = async () => {
  const { data } = await getWaresCategoryListAPI({})
  optionsCategory.value = data
}

const optionsBranch = ref<Array<Inventory.BranchList>>([])
const getBranchList = async () => {
  const { data } = await getBranchAPI({ pageNum: 1, pageSize: 20 })
  optionsBranch.value = data.list
}

const optionsSupplier = ref<Array<Inventory.SupplierList>>([])
const getSupplierList = async () => {
  const { data } = await getSupplierAPI({ pageNum: 1, pageSize: 20 })
  optionsSupplier.value = data.list
}
const getGoodsDetail = async () => {
  const { data } = await getGoodsDetailAPI({ id: route.query.id })
  formData.value = data
}

onMounted(async () => {
  await Promise.all([getGoodsCategory(), getBranchList(), getSupplierList()])
  const query = route.query
  if (query.id && +query.id) {
    getGoodsDetail()
  } else {
    formData.value.goodsCategoryId = query.categoryId && +query.categoryId ? +query.categoryId : optionsCategory.value[0].id
  }
})

const rules = reactive({
  goodsCategoryId: [{ required: true, message: '请选择' }],
  name: [{ required: true, message: '请输入' }],
})

const addProduct = () => {
  formData.value.products.push(cloneDeep(initData.products[0]))
}
const deleteProduct = (index: number) => {
  if (!index) return ElMessage.error('主规格不能删除')
  formData.value.products = formData.value.products.filter((item, i) => i !== index)
}

const onSubmit = async (type: string) => {
  await formRef.value?.validate()
  if (Array.isArray(formData.value.goodsCategoryId)) formData.value.goodsCategoryId = formData.value.goodsCategoryId[0]
  if (formData.value.id) {
    await editGoodsAPI(formData.value)
  } else {
    await addGoodsAPI(formData.value)
  }
  ElMessage.success('保存成功')
  if (type) {
    // 保存并新增初始化数据
    formData.value = cloneDeep(initData)
    formRef.value?.resetFields()
  } else {
    router.back()
  }
}
</script>

<template>
  <div class="auto-height-container default-table-container">
    <div class="table-container">
      <header-line :title="(formData.id ? '编辑' : '新增') + '商品'" @on-submit="onSubmit('')">
        <template #button>
          <el-button type="primary" @click="onSubmit('add')">保存并新增</el-button>
        </template>
      </header-line>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane class="flex1" label="基础档案" name="first">
        <section style="overflow-x: hidden">
          <el-form ref="formRef" label-suffix="：" label-width="120px" :model="formData" :rules="rules">
            <div>
              <paragraph name="基本信息" />
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="销售方式" prop="saleType">
                    <el-radio-group v-model="formData.saleType">
                      <el-radio-button v-for="item in stockDetailList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品分类" prop="goodsCategoryId">
                    <el-cascader
                      v-model="formData.goodsCategoryId"
                      check-strictly
                      class="width100"
                      filterable
                      node-key="id"
                      :options="optionsCategory"
                      :props="{ label: 'name', value: 'id', checkStrictly: true, emitPath: false }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="品牌" prop="brandId">
                    <el-select v-model="formData.brandId" placeholder="">
                      <el-option v-for="item in optionsBranch" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="商品代码" prop="products.0.sn" :rules="[{ required: true, message: '请输入' }]">
                    <el-input v-model="formData.products[0].sn" placeholder="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品条码" prop="products.0.barcode" :rules="[{ required: true, message: '请输入' }]">
                    <el-input v-model="formData.products[0].barcode" class="width100" :controls="false" placeholder="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品名称" prop="name">
                    <el-input v-model="formData.name" placeholder="" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="速记码" prop="pinYin">
                    <el-input v-model="formData.pinYin" placeholder="" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="规格型号" prop="products.0.spesDesc" :rules="[{ required: true, message: '请输入' }]">
                    <el-input v-model="formData.products[0].spesDesc" placeholder="" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div>
              <paragraph name="价格设置" />
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="进货价">
                    <!-- <el-input-number v-model="formData.products[0].purPrice" class="width100" :controls="false" :min="0" /> -->
                    <input-number-float v-model:modelValue="formData.products[0].purPrice" class="width100" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="零售价">
                    <input-number-float v-model:modelValue="formData.products[0].posPrice" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].posPrice" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="配送价">
                    <input-number-float v-model:modelValue="formData.products[0].rmoPrice" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].rmoPrice" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="会员价">
                    <input-number-float v-model:modelValue="formData.products[0].vipPrice" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].vipPrice" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="会员价1">
                    <input-number-float v-model:modelValue="formData.products[0].vip1Price" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].vip1Price" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="会员价2 ">
                    <input-number-float v-model:modelValue="formData.products[0].vip2Price" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].vip2Price" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="最低售价">
                    <input-number-float v-model:modelValue="formData.products[0].minPrice" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].minPrice" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="最高售价">
                    <input-number-float v-model:modelValue="formData.products[0].maxPrice" class="width100" />

                    <!-- <el-input-number v-model="formData.products[0].maxPrice" class="width100" :controls="false" :min="0" /> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

            <div>
              <paragraph name="商品图片" />
              <el-form-item>
                <upload-imgs v-model:file-list="formData.images" />
              </el-form-item>
            </div>

            <div>
              <paragraph name="规格管理" />
              <el-form-item prop="products">
                <el-table border class="pb20" :data="formData.products">
                  <el-table-column align="center" width="120">
                    <template #default="{ $index }">
                      <el-button :icon="CirclePlus" link type="primary" @click="addProduct" />
                      <el-button :icon="Delete" link type="primary" @click="deleteProduct($index)" />
                    </template>
                  </el-table-column>
                  <el-table-column label="序号" prop="index" width="60">
                    <template #default="{ row, $index }">
                      {{ $index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column label="规格代码" prop="sn" width="200">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="`products[${$index}].sn`" :rules="[{ required: true }]">
                        <el-input v-model="formData.products[$index].sn" :disabled="!$index" placeholder="" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" prop="spesDesc" width="200">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="`products[${$index}].spesDesc`" :rules="[{ required: true }]">
                        <el-input v-model="formData.products[$index].spesDesc" :disabled="!$index" placeholder="" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="条码" prop="barcode" width="200">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="`products[${$index}].barcode`" :rules="[{ required: true }]">
                        <el-input v-model="formData.products[$index].barcode" :disabled="!$index" placeholder="" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格单位" prop="unitName" width="150">
                    <template #default="{ row, $index }">
                      <el-form-item :prop="`products[${$index}].unitName`" :rules="[{ required: true }]">
                        <el-input v-model="formData.products[$index].unitName" placeholder="" />
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="换算率" prop="convert" width="120">
                    <template #default="{ row, $index }">
                      <!-- <input-number-float v-model:modelValue="formData.products[0].convert" class="width100" /> -->

                      <el-input-number
                        v-model="formData.products[$index].convert"
                        align="left"
                        :controls="false"
                        :disabled="!$index"
                        style="width: 90px"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="进货价" prop="purPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].purPrice" class="width100" :disabled="!$index" />
                      <!-- <el-input-number v-model="formData.products[$index].purPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="零售价" prop="posPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].posPrice" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].posPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="配送价" prop="rmoPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].rmoPrice" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].rmoPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="会员价" prop="vipPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].vipPrice" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].vipPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="会员价1" prop="vip1Price" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].vip1Price" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].vip1Price" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="会员价2" prop="vip2Price" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].vip2Price" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].vip2Price" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="最低售价" prop="minPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].minPrice" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].minPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="最高售价" prop="maxPrice" width="150">
                    <template #default="{ row, $index }">
                      <input-number-float v-model:modelValue="formData.products[$index].maxPrice" :disabled="!$index" />

                      <!-- <el-input-number v-model="formData.products[$index].maxPrice" :controls="false" :disabled="!$index" placeholder="" /> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="库存上限" prop="minQuantity" width="150">
                    <template #default="{ row, $index }">
                      <el-input-number
                        v-model="formData.products[$index].minQuantity"
                        align="left"
                        :controls="false"
                        :disabled="!$index"
                        placeholder=""
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="库存下线" prop="maxQuantity" width="150">
                    <template #default="{ row, $index }">
                      <el-input-number
                        v-model="formData.products[$index].maxQuantity"
                        align="left"
                        :controls="false"
                        :disabled="!$index"
                        placeholder=""
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </div>

            <div>
              <paragraph name="库存属性" />
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="经营模式" prop="operationMode">
                    <el-select v-model="formData.operationMode" placeholder="">
                      <el-option v-for="item in manageModeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="库存下限" prop="">
                    <el-input-number v-model="formData.products[0].minQuantity" align="left" class="width100" :controls="false" :min="0" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="库存上限" prop="">
                    <el-input-number v-model="formData.products[0].maxQuantity" align="left" class="width100" :controls="false" :min="0" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="保质天数" prop="effectiveDays">
                    <el-input-number v-model="formData.effectiveDays" align="left" class="width100" :controls="false" :min="0" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="会员积分" prop="pointValue">
                    <el-input-number
                      v-model="formData.pointValue"
                      align="left"
                      :controls="false"
                      :min="0"
                      style="width: 190px; margin-right: 10px"
                    />
                    <el-select v-model="formData.pointType" placeholder="" style="width: calc(100% - 200px)">
                      <el-option v-for="item in pointTypeLsit" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="销售提成" prop="commissionType">
                    <el-select v-model="formData.commissionType" placeholder="">
                      <el-option v-for="item in saleDeductList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="提成比例" prop="commissionValue">
                    <el-input-number v-model="formData.commissionValue" align="left" class="width100" :controls="false" :min="0" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="产地" prop="producer">
                    <el-input v-model="formData.producer" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商品状态" prop="isMarketable">
                    <el-select v-model="formData.isMarketable" placeholder="">
                      <el-option v-for="item in saleTypeList" :key="item.label" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="主供应商" prop="supplierId">
                    <el-select v-model="formData.supplierId" placeholder="">
                      <el-option v-for="item in optionsSupplier" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </section>
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="second">
        <div>
          <wang-editor v-model:value="formData.intro" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.table-box {
  height: 100%;
  flex: 1;
}
</style>
